<template>
  <FieldOrderConfig v-model="innerValue" :includeForms="includeForms" :formDefinition="formDefinition"/>
</template>
<script>
import FieldOrderConfig from '@comp/hhd/design/FormMenu/FieldOrderConfig.vue';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';
import {createModelForVue, createProps} from '@/utils';

export default {
  name: 'RelationFieldOrderConfig',
  components: {FieldOrderConfig},
  model: createModelForVue(),
  props: {
    includeForms: createProps(Array, () => undefined),
    value: createProps(Array, () => undefined),
    formDefinition: createFormDefinition(),
  },
  methods: {
    change(v) {
      this.$emit('change', v);
    }
  },
  computed: {
    innerValue: {
      get() {
        let list = this.value;
        if (!list) {
          this.change(list = []);
        }
        list = list.map(item => ({
          fieldId: item.fieldId,
          formId: item.formId,
          orderByType: item.sortType,
          sortType: item.sortType,
        }));
        return list;
      },
      set(v) {
        if (v) {
          let list = v || [];
          list = list.map(item => ({
            formId: item.formId,
            fieldId: item.fieldId,
            sortType: item.orderByType,
            orderByType: item.orderByType,
          }));
          return this.change(list);
        }
        this.change(v);
      }
    }
  }
};
</script>